{% extends 'base.html' %}
{% load static %}

{% block title %}{{ tool.name }} - 工具详情 - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.tool-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
}

.tool-icon-large {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.tool-meta {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.tool-description {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.tool-screenshot {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
}

.rating-stars {
    color: #ffc107;
}

.review-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.related-tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.related-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.btn-visit-tool {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-visit-tool:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.stats-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}
</style>
{% endblock %}

{% block content %}
<!-- 工具头部 -->
<div class="tool-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="text-center text-md-start">
                    <div class="tool-icon-large">
                        <i class="{{ tool.icon }}"></i>
                    </div>
                    <h1 class="display-4 mb-3">
                        {{ tool.name }}
                        {% if user.is_authenticated and user == tool.author or user.is_staff %}
                        <div class="btn-group ms-3" role="group">
                            <a href="{% url 'tools:tool_edit' slug=tool.slug %}" class="btn btn-outline-light btn-sm">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <a href="{% url 'tools:tool_delete' slug=tool.slug %}" class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-trash"></i> 删除
                            </a>
                        </div>
                        {% endif %}
                    </h1>
                    <p class="lead mb-4">{{ tool.description }}</p>
                    
                    <div class="d-flex flex-wrap justify-content-center justify-content-md-start gap-2 mb-3">
                        <span class="badge bg-light text-dark fs-6">{{ tool.get_tool_type_display }}</span>
                        {% if tool.is_free %}
                        <span class="badge bg-success fs-6">免费</span>
                        {% else %}
                        <span class="badge bg-warning fs-6">付费</span>
                        {% endif %}
                        {% if tool.is_featured %}
                        <span class="badge bg-warning fs-6">
                            <i class="fas fa-star"></i> 推荐
                        </span>
                        {% endif %}
                    </div>

                    <a href="{{ tool.url }}" target="_blank" class="btn btn-visit-tool btn-lg"
                       onclick="trackClick('{{ tool.slug }}')">
                        <i class="fas fa-external-link-alt me-2"></i>
                        访问工具
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                {% if tool.screenshot %}
                <div class="text-center">
                    <img src="{{ tool.screenshot.url }}" alt="{{ tool.name }}" class="tool-screenshot">
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <!-- 工具详细信息 -->
            <div class="tool-description">
                <h3 class="mb-4">
                    <i class="fas fa-info-circle text-primary"></i>
                    工具详情
                </h3>
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>工具名称：</strong>{{ tool.name }}</p>
                        <p><strong>工具类型：</strong>{{ tool.get_tool_type_display }}</p>
                        <p><strong>是否免费：</strong>
                            {% if tool.is_free %}
                            <span class="text-success">是</span>
                            {% else %}
                            <span class="text-warning">否</span>
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>添加时间：</strong>{{ tool.created_at|date:"Y-m-d" }}</p>
                        <p><strong>更新时间：</strong>{{ tool.updated_at|date:"Y-m-d" }}</p>
                        {% if tool.category %}
                        <p><strong>分类：</strong>
                            <a href="{{ tool.category.get_absolute_url }}" class="text-decoration-none">
                                <i class="{{ tool.category.icon }}"></i> {{ tool.category.name }}
                            </a>
                        </p>
                        {% endif %}
                    </div>
                </div>
                <div class="mt-4">
                    <h5>工具描述</h5>
                    <p class="text-muted">{{ tool.description }}</p>
                </div>
            </div>

            <!-- 用户评价 -->
            {% if reviews %}
            <div class="mb-4">
                <h3 class="mb-4">
                    <i class="fas fa-comments text-primary"></i>
                    用户评价 ({{ reviews.count }})
                </h3>
                {% for review in reviews %}
                <div class="review-card">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <h6 class="mb-1">{{ review.user.username }}</h6>
                            <div class="rating-stars">
                                {% for i in "12345" %}
                                {% if forloop.counter <= review.rating %}
                                <i class="fas fa-star"></i>
                                {% else %}
                                <i class="far fa-star"></i>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <small class="text-muted">{{ review.created_at|date:"Y-m-d H:i" }}</small>
                    </div>
                    {% if review.comment %}
                    <p class="mb-0">{{ review.comment }}</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 工具统计 -->
            <div class="tool-meta mb-4">
                <h5 class="mb-3">
                    <i class="fas fa-chart-bar text-primary"></i>
                    工具统计
                </h5>
                <div class="row text-center">
                    <div class="col-4">
                        <div class="stats-card">
                            <div class="stats-number">{{ tool.views }}</div>
                            <small class="text-muted">浏览次数</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stats-card">
                            <div class="stats-number">{{ tool.clicks }}</div>
                            <small class="text-muted">点击次数</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stats-card">
                            <div class="stats-number">{{ tool.rating }}</div>
                            <small class="text-muted">评分</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分享按钮 -->
            <div class="tool-meta mb-4">
                <h5 class="mb-3">
                    <i class="fas fa-share-alt text-primary"></i>
                    分享工具
                </h5>
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="copyLink()">
                        <i class="fas fa-link"></i> 复制链接
                    </button>
                    <a href="https://twitter.com/intent/tweet?text={{ tool.name }}&url={{ request.build_absolute_uri }}" 
                       target="_blank" class="btn btn-outline-info">
                        <i class="fab fa-twitter"></i> 分享到 Twitter
                    </a>
                </div>
            </div>

            <!-- 相关工具 -->
            {% if related_tools %}
            <div class="tool-meta">
                <h5 class="mb-3">
                    <i class="fas fa-tools text-primary"></i>
                    相关工具
                </h5>
                {% for related_tool in related_tools %}
                <div class="related-tool-card mb-3">
                    <div class="mb-2">
                        <i class="{{ related_tool.icon }} text-primary fa-2x"></i>
                    </div>
                    <h6 class="mb-2">
                        <a href="{{ related_tool.get_absolute_url }}" class="text-decoration-none">
                            {{ related_tool.name }}
                        </a>
                    </h6>
                    <p class="text-muted small mb-2">{{ related_tool.description|truncatechars:60 }}</p>
                    <div class="d-flex justify-content-between text-muted small">
                        <span><i class="fas fa-eye"></i> {{ related_tool.views }}</span>
                        <span><i class="fas fa-star"></i> {{ related_tool.rating }}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function trackClick(slug) {
    fetch(`/tools/click/${slug}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    });
}

function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(function() {
        // 可以添加一个提示消息
        alert('链接已复制到剪贴板！');
    });
}
</script>
{% endblock %}